<template>
  <p>数据代理时可通过属性 params 传入自定义的筛选参数，当 params 发生变动时自动发起数据请求</p>
  <p>高级搜素可以考虑点击确认时覆盖 params 参数或者直接调用表格方法 reloadData ，在请求过程中带入筛选参数</p>
  <div style="display: flex; justify-content: space-between; padding-bottom: 20px">
    <el-input
      v-model="value"
      :clearable="true"
      placeholder="请输入名称"
      style="width: 200px"
      @change="state.params.name = value"
    />
    <el-button @click="tableRef?.reloadData()">高级搜索</el-button>
  </div>
  <MerakXTable
    ref="tableRef"
    :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
    :params="state.params"
    :columns="state.columns"
    :pagination="false"
    :query-data="handleQueryData"
  />
  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import { ElInput, ElButton } from "element-plus";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const html = ref(`
<template>
  <div style="display: flex; justify-content: space-between; padding-bottom: 20px">
    <el-input
      v-model="value"
      :clearable="true"
      placeholder="请输入名称"
      style="width: 200px"
      @change="state.params.name = value"
    />
    <el-button @click="tableRef?.reloadData()">高级搜索</el-button>
  </div>
  <MerakXTable
    ref="tableRef"
    :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
    :params="state.params"
    :columns="state.columns"
    :pagination="false"
    :query-data="handleQueryData"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import { ElInput, ElButton } from "element-plus";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const value = ref(\`\`);

const tableRef = ref<MerakXTableInstance>();

const state = reactive<{
  params: Record<string, any>;
  columns: MerakXTableColumn[];
}>({
  params: {
    name: ""
  },
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ]
});

const handleQueryData: MerakXTableInstance["queryData"] = async ({ from }) => {
    const data = [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ];
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: data.filter(v => v.name.includes(from?.name ?? "")) });
    }, 500);
  });
};
<\/script>
`);

const value = ref(``);

const tableRef = ref<MerakXTableInstance>();

const state = reactive<{
  params: Record<string, any>;
  columns: MerakXTableColumn[];
}>({
  params: {
    name: ""
  },
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ]
});

const handleQueryData: MerakXTableInstance["queryData"] = async ({ from }) => {
  const data = [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ];
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: data.filter(v => v.name.includes(from?.name ?? "")) });
    }, 500);
  });
};
</script>
